<template>
  <div class="lang">
    <div class="lang-now clearfix" @click.stop="SET_SHOW_LANGLIST(!showLangList)">
      <i class="icon-lang fl" :class="'icon-'+language" />
      <span class="fr">{{lang[language]}}
        <i class="iconfont icon-xiala" :class="{active:showLangList}" />
      </span>
    </div>
    <transition name="fade">
      <ul v-show="showLangList" class="lang-ul">
        <li class="clearfix" :class="{active:language === k}" v-for="(v,k) in lang" :key="k" @click="SET_LANGUAGE(k);">
          <i class="icon-lang fl" :class="'icon-'+k" />
          <span class="fl">{{ v }}</span>
        </li>
      </ul>
    </transition>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
  data() {
    return {
      lang: {
        zh: '简体中文',
        en: 'English',
      },
    };
  },
  computed: {
    ...mapGetters(['showLangList', 'language']),
  },
  methods: {
    ...mapMutations(['SET_SHOW_LANGLIST', 'SET_LANGUAGE']),
  },
};
</script>
<style lang="scss" scoped>
.lang {
  position: relative;
  .lang-now {
    width: 90px;
    cursor: pointer;
    &:hover {
      color: #fff;
    }
    .icon-xiala {
      display: inline-block;
      transition: all 0.2s;
      &.active {
        transform: rotate(180deg);
      }
    }
    .icon-lang{
      display: inline-block;
      margin-top: 12px;
    }
  }
  .lang-ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
    background-color: #fff;
    padding: 4px 0;
    border-radius: 3px;
    border: solid 1px #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all 0.2s;
    }
    &.fade-enter,
    &.fade-leave-to {
      opacity: 0;
      top: 40px;
    }
    &::before {
      content: " ";
      position: absolute;
      border-left: solid 1px #e4e7ed;
      border-top: solid 1px #e4e7ed;
      display: block;
      top: -4px;
      left: 50%;
      width: 7px;
      height: 7px;
      transform: translateX(-50%) rotate(45deg);
      background-color: #fff;
    }
    li {
      margin: 0;
      padding: 0 11px;
      width: 110px;
      font-size: 14px;
      color: #333;
      line-height: 26px;
      height: 26px;
      cursor: pointer;
      &:hover,
      &.active {
        color: #70c1b3;
        background-color: #f2f2f2;
      }
      .icon-lang{
        margin-top: 5px;
        margin-right: 10px;
        display: block;
      }
    }
  }
  .icon-lang {
    width: 22px;
    height: 16px;
    &.icon-zh {
      background: url(../../assets/images/header/lang-zh.png) no-repeat;
      background-size: 100% 100%;
    }
    &.icon-en {
      background: url(../../assets/images/header/lang-en.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
